<template>
  <div class="discover_details">
    <div class="discover_details_top">
      <span @click="$router.back()">返回上一级</span>
    </div>
    <div class="discover_details_bottom">
      <div
        v-loading="loading"
        class="discover_details_bottom_item"
        v-for="(v, i) in detailsList"
        :key="i"
      >
        <div class="discover_details_L">
          <div class="discover_img">
            <img :src="imgBaseUrl + v.headPortrait" />
          </div>
          <div class="discover_centent">
            <div class="top">{{ v.nickName }}</div>
            <div class="bottom">
              看了我
              <span>{{ v.browseTime }}</span>
              次
            </div>
          </div>
        </div>
        <div class="discover_btn changeHanld" @click="showtellphone(v.phone)">联系TA</div>

        <el-dialog center v-model="tellphone" :show-close="true" width="280px" title="联系电话">
          <tellphone :tellNumber="usertellNumber" @isCloseBtn="isHide" />
        </el-dialog>
      </div>
      <div class="userImg">
        <div class="img_content">
          <img src="../../../../static/image/userInfo/usericon.png" alt />
          <span>&gt;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tellphone from "../../../components/VIP/userEdit/tellphone.vue";
import { commonRequest, postRequest, imgBaseUrl } from "../../../api/api.js";
export default {
  components: {
    tellphone
  },
  data() {
    return {
      tellphone: false,
      detailsList: [], // 文章详情列表
      usertellNumber: 0,
      loading: true, // 添加了loading
      imgBaseUrl: ""
    };
  },
  mounted() {
    this.imgBaseUrl = imgBaseUrl;
    this.getArticleShareInfo(); // 获取文章详情
  },
  methods: {
    getArticleShareInfo() {
      let { id } = this.$route.query;
      this.loading = true;
      commonRequest("/api/ums/umsVisitor/getVisitorInfo", {
        articleShareId: id
      }).then(res => {
        this.loading = false;
        // console.log(res);
        this.detailsList = res.visitorList;
      });
    },
    showtellphone(val) {
      this.usertellNumber = val;
      this.tellphone = true;
      console.log(val);
    },
    isHide(val) {
      this.tellphone = val;
    }
  }
};
</script>

<style lang="less" scoped>
.discover_details_top {
  width: 900px;
  height: 60px;
  background-color: #fff;
  padding-left: 20px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  span {
    border: 1px solid #44a2ff;
    color: #44a2ff;
    padding: 5px 10px;
    border-radius: 4px;
  }
}
.discover_details_bottom {
  .discover_details_bottom_item {
    height: 100px;
    display: flex;
    padding: 20px 0;
    align-items: center;
    justify-content: space-between;
    .discover_details_L {
      display: flex;
      height: 100%;
      .discover_img {
        width: 60px;
        height: 60px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .discover_centent {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        height: 100%;
        justify-content: space-around;

        .top {
          font-size: 14px;
          color: #333333;
        }
        .bottom {
          font-size: 14px;
          color: #999999;
          span {
            font-size: 14px;
            color: #44a2ff;
          }
        }
      }
    }

    .discover_btn {
      padding: 4px 12px;
      background-color: #44a2ff;
      color: #fff;
      border-radius: 4px;
    }
  }
  .userImg {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    .img_content {
      display: flex;
      align-items: center;
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    span {
      margin: 0 10px;
      font-size: 20px;
    }
  }
}
</style>
